<template>
  <div>
    <q-card style="min-height:600px;">
      <q-tabs
        v-model="tab"
        dense
        inline-label
        class="bg-grey-2 text-teal"
        align="left"
        narrow-indicator
      >
        <q-tab name="mails" style="padding:5px;font-size:20px;" label="明细信息" ></q-tab>
      </q-tabs>
      <q-tab-panels v-model="tab"  animated>
        <q-tab-panel name="mails">
          <div class="row" style="font-size:14px;">
            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
              <span class="q-my-xs text-weight-bold">编码：</span>
              <span class="q-my-xs">{{ addOrEditForm.code }}</span>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
              <span class="q-my-xs text-weight-bold">名称：</span>
              <span class="q-my-xs">{{ addOrEditForm.name }}</span>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
              <span class="q-my-xs text-weight-bold">层级：</span>
              <span class="q-my-xs">{{ addOrEditForm.grade }}</span>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
              <span class="q-my-xs text-weight-bold">是否允许新增下级：</span>
              <q-chip dense square label="是" color="positive" text-color="white" v-if="addOrEditForm.increase===1"/>
              <q-chip dense square label="否" color="negative" text-color="white" v-if="addOrEditForm.increase===0"/>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
              <span class="q-my-xs text-weight-bold">节点：</span>
              <q-chip dense square label="叶子节点" color="positive" text-color="white" v-if="addOrEditForm.isLeaf===1"/>
              <q-chip dense square label="非叶子结点" color="negative" text-color="white" v-if="addOrEditForm.isLeaf===0"/>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
              <span class="q-my-xs text-weight-bold">状态：</span>
              <q-chip dense square label="启用" color="positive" text-color="white" v-if="addOrEditForm.active===1"/>
              <q-chip dense square label="禁用" color="negative" text-color="white" v-if="addOrEditForm.active===0"/>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
              <span class="q-my-xs text-weight-bold">创建人：</span>
              <span class="q-my-xs">{{addOrEditForm.createUserName}}</span>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
              <span class="q-my-xs text-weight-bold">创建时间：</span>
              <span class="q-my-xs">{{ addOrEditForm.createTime }}</span>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
              <span class="q-my-xs text-weight-bold">最近更新时间：</span>
              <span class="q-my-xs">{{ addOrEditForm.lastUpdateTime }}</span>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 name">
              <span class="q-my-xs text-weight-bold">最近更新人：</span>
              <span class="q-my-xs">{{ addOrEditForm.updateUserName }}</span>
            </div>
          </div>
        </q-tab-panel>
      </q-tab-panels>
      <q-separator ></q-separator>
      <q-tabs
        style="margin-top:20px;"
        v-model="tabs"
        dense
        inline-label
        class="bg-grey-2 text-teal"
        align="left"
        narrow-indicator
      >
      <q-tab name="item" style="padding:5px;font-size:20px;" label="品项信息"></q-tab>
      </q-tabs>
      <q-tab-panels v-model="tabs"  animated>
        <q-tab-panel  name="item" style="padding:0px;">
          <item url="/mdm/item/category/query" :id="paId"></item>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
// import Site from './Site'
import item from './item'
export default {
  components: {
    // Site,
    item
  },
  props: {
    treeid: {
    },
    item: {
    }
  },
  data () {
    return {
      typeOpti: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      typeOptions: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      parentIds: 0,
      header: 'root',
      tab: 'mails',
      tabs: 'item',
      paId: 0,
      num: false,
      addOrEditForm: {
        name: '',
        nameEn: '',
        grade: '',
        sn: '',
        isLeaf: '',
        increase: '',
        remark: '',
        active: '1',
        createTime: '',
        createUserName: '',
        updateUserName: '',
        listUpdataTime: ''
      },
      searchForm: {
        code: '',
        name: '',
        nameEn: '',
        type: '',
        active: '1',
        createTime: '',
        createUserName: '',
        remark: ''
      },
      typeOption: [
        {
          label: 'master',
          value: 1
        },
        {
          label: 'custom',
          value: 2
        }
      ]
    }
  },
  computed: {
    categoryId () {
      return this.$store.state.router
    }
  },
  watch: {
    'item' () {
      console.log('111111111111111111')
      this.getList()
    },
    'treeid': {
      handler (treeid) {
        console.log(treeid)
        this.header = treeid[0].header
        console.log(treeid, this.header)
        if (this.header === 'inner') {
          this.parentIds = treeid[0].id
          this.searchForm = {
            code: '',
            name: '',
            nameEn: '',
            type: '',
            active: '',
            createTime: '',
            createUserName: '',
            remark: ''
          }
          this.getList()
        } else {
          this.paId = treeid[0].id
          this.parentIds = treeid[0].categoryTypeId
          this.addOrEditForm = {
            name: '',
            nameEn: '',
            grade: '',
            sn: '',
            isLeaf: '',
            increase: '',
            remark: '',
            createTime: '',
            active: '1',
            createUserName: '',
            updateUserName: '',
            listUpdataTime: ''
          }
          this.getList()
        }
      },
      deep: true
    }
  },
  validations: {
    addOrEditForm: {
      name: { required },
      sn: { required },
      increase: { required }
    },
    searchForm: {
      name: { required },
      type: { required }
    }
  },
  methods: {
    async getList () {
      if (this.header === 'root') {
        this.addOrEditForm = {
          name: '',
          nameEn: '',
          grade: '',
          sn: '',
          isLeaf: '',
          increase: '',
          remark: '',
          createTime: '',
          createUserName: '',
          updateUserName: '',
          active: '1',
          listUpdataTime: ''
        }
        await this.$api({
          method: 'get',
          url: `/mdm/category/findById/${this.paId}`,
          useLoadLayer: true,
          successCallback: ({ data }) => {
            console.log(this.treeid)
            console.log(data)
            this.addOrEditForm = {
              name: data.name,
              code: data.code,
              nameEn: data.nameEn,
              grade: data.grade,
              sn: data.sn,
              isLeaf: data.isLeaf,
              increase: data.increase,
              remark: data.remark,
              createTime: data.createTime,
              active: data.active,
              createUserName: data.createUserName,
              updateUserName: data.updateUserName,
              listUpdataTime: data.listUpdataTime
            }
            // this.item = 0
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      } else {
        this.searchForm = {
          code: '',
          name: '',
          nameEn: '',
          type: '',
          active: '',
          createTime: '',
          createUserName: '',
          remark: ''
        }
        await this.$api({
          method: 'get',
          url: `/mdm/categoryType/findById/${this.parentIds}`,
          useLoadLayer: true,
          successCallback: ({ data }) => {
            this.searchForm = {
              code: data.code,
              name: data.name,
              nameEn: data.nameEn,
              type: data.type,
              active: data.active,
              createTime: data.createTime,
              createUserName: data.createUserName,
              remark: data.remark
            }
            this.item = 0
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }
    },
    async updatelist () {
      if (this.header === 'inner') {
        console.log(89989898989)
        await this.$api({
          method: 'put',
          url: `/mdm/categoryType/update`,
          params: {
            id: this.parentIds,
            code: this.searchForm.code,
            name: this.searchForm.name,
            nameEn: this.searchForm.nameEn,
            type: this.searchForm.type,
            createTime: this.searchForm.createTime,
            createUserName: this.searchForm.createUserName,
            remark: this.searchForm.remark,
            active: Number(this.searchForm.active)
          },
          emulateJSON: true,
          useNotify: true,
          useLoadLayer: true,
          successCallback: ({ data }) => {
            this.num = !this.num
            this.$emit('update', this.num)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      } else {
        await this.$api({
          method: 'put',
          url: `/mdm/category/update`,
          params: {
            parentId: this.parentIds,
            sn: Number(this.addOrEditForm.sn),
            name: this.addOrEditForm.name,
            nameEn: this.addOrEditForm.nameEn,
            increase: this.addOrEditForm.increase,
            id: this.paId,
            remark: this.addOrEditForm.remark,
            active: Number(this.addOrEditForm.active)
          },
          emulateJSON: true,
          useNotify: true,
          useLoadLayer: true,
          successCallback: ({ data }) => {
            this.num = !this.num
            this.$emit('update', this.num)
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
/deep/.q-tab__label
  font-size 16px
.name
  padding-bottom 10px
</style>
